<template>
  <CommonPage show-footer>
    <div class="flex flex-rr mb-10">
      <!-- 新建公告 -->
      <div class="mr-10">
        <n-button type="primary" @click="handleAdd">
          <TheIcon icon="material-symbols:add" :size="18" class="mr-5" />
          新建公告
        </n-button>
      </div>
    </div>

    <CrudTable
      ref="$table"
      v-model:query-items="queryItems"
      :extra-params="extraParams"
      :columns="columns"
      :get-data="api.getNoticeList"
    >
    </CrudTable>

    <!-- 新增/编辑/查看 -->
    <CrudModal
      style="width: 1000px"
      :title="modalTitle"
      :loading="modalLoading"
      :show-footer="modalAction !== 'view'"
      @on-save="handleSave"
      v-model:visible="modalVisible"
    >
      <n-form
        ref="modalFormRef"
        label-placement="left"
        label-width="100"
        :model="modalForm"
        :disabled="modalAction === 'view'"
      >
        <n-form-item
          label="标题"
          path="title"
          :rule="{
            required: true,
            message: '请输入标题',
          }"
        >
          <n-input
            clearable
            placeholder="请输入标题"
            v-model:value="modalForm.title"
          />
        </n-form-item>

        <n-form-item
          label="标签"
          path="tagList"
          :rule="{
            required: true,
            message: '请输入标签',
          }"
        >
          <n-input
            clearable
            placeholder="请输入标签（多个标签用英文逗号隔开）"
            v-model:value="modalForm.tagList"
          />
        </n-form-item>

        <n-form-item
          label="正文"
          path="content"
          :rule="{
            required: true,
            message: '请输入正文',
          }"
        >
          <Base-Editor v-model:value="modalForm.content"></Base-Editor>
        </n-form-item>
      </n-form>
    </CrudModal>
  </CommonPage>
</template>

<script setup>
import { h, onMounted } from 'vue'
import { NButton, NSwitch, NTag } from 'naive-ui'
import { useCRUD } from '@/composables'
import { renderIcon } from '@/utils'
import api from './api'

const $table = ref(null)
const queryItems = ref({})
const extraParams = ref({})

const columns = [
  {
    title: '序号',
    key: 'tableIndex',
    width: 100,
  },
  {
    title: '标题',
    key: 'title',
    width: 200,
  },
  {
    title: '标签',
    key: 'tagList',
    width: 300,
    render(row) {
      return row.tagList?.split(',')?.map((v) => {
        return h(
          NTag,
          {
            style: 'margin-right: 5px',
            type: 'info',
          },
          {
            default: () => v,
          }
        )
      })
    },
  },
  {
    title: '创建人',
    key: 'createUser',
    width: 150,
  },
  {
    title: '创建日期',
    key: 'createTime',
    width: 200,
  },
  {
    title: '启停状态',
    key: 'status',
    render(row) {
      return h(NSwitch, {
        checkedValue: 1,
        unCheckedValue: 0,
        value: row.status,
        loading: !!row.publishing,
        onUpdateValue: async () => {
          try {
            row.publishing = true

            const params = {
              id: row.id,
              status: row.status === 1 ? 0 : 1,
            }

            const { code } = await api.updateNotice(params)

            if (code === 200) {
              row.publishing = false
              row.status = row.status === 1 ? 0 : 1
              $message.success('操作成功')
            }
          } catch (err) {
            row.publishing = false
          }
        },
      })
    },
  },
  {
    title: '操作',
    key: 'actions',
    width: 200,
    fixed: 'right',
    render(row) {
      return [
        h(
          NButton,
          {
            type: 'primary',
            size: 'small',
            secondary: true,
            style: 'margin-right: 10px;',
            onClick: () => handleEdit(row),
          },
          {
            default: () => '编辑',
            icon: renderIcon('material-symbols:edit-outline', { size: 14 }),
          }
        ),
        h(
          NButton,
          {
            type: 'error',
            size: 'small',
            secondary: true,
            onClick: () => handleDelete({ idList: [row.id] }),
          },
          {
            default: () => '删除',
            icon: renderIcon('material-symbols:delete-outline', { size: 14 }),
          }
        ),
      ]
    },
  },
]

const {
  modalVisible,
  modalAction,
  modalTitle,
  modalLoading,
  handleAdd,
  handleDelete,
  handleEdit,
  handleView,
  handleSave,
  modalForm,
  modalFormRef,
} = useCRUD({
  name: '公告',
  initForm: {},
  doCreate: api.updateNotice,
  doDelete: api.deleteNotice,
  doUpdate: api.updateNotice,
  refresh: () => $table.value?.handleSearch(),
})

onMounted(() => {
  $table.value?.handleQuery()
})
</script>

<style lang="scss" scoped></style>
